<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .container {
        position: relative;
        width: 600px;
        height: 400px;
        /* border: 2px solid red; */
        margin: 20px auto;
        overflow: hidden;
      }

      .container ul {
        position: absolute;
        left: 0px;
        width: 3600px;
        height: 400px;
        /*border:3px solid green; */
      }

      .container ul li {
        float: left;
        list-style-type: none;
        /* 设置元素的透明度 */
        /* opacity:0.8;   */
      }

      .container ul li img {
        width: 600px;
        height: 400px;
      }

      .container .arrow {
        /*默认是隐藏*/
        display: none;
        position: absolute;
        top: 50%;
        width: 20px;
        height: 30px;
        line-height: 30px;
        margin-top: -15px;
        /* background-color: rgba(233, 81, 10, 0.5); */
        background-color: rgba(0, 0, 0, 0.3);
        text-decoration: none;
        color: #fff;
        text-align: center;
        font-size: 18px;
        cursor: pointer;
      }

      .container .arrow:hover {
        background-color: rgba(0, 0, 0, 0.5);
      }

      .container .arrow-left {
        left: 0px;
        border-radius: 0px 15px 15px 0px;
      }

      .container .arrow-right {
        right: 0px;
        border-radius: 15px 0px 0px 15px;
      }

      .container .dots {
        position: absolute;
        bottom: 10px;
        left: 50%;
        width: 70px;
        height: 15px;
        line-height: 15px;
        margin-left: -35px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        text-align: center;
      }

      .container .dots span {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-bottom: 2px;
        background-color: #fff;
        cursor: pointer;
      }

      .container .dots .current {
        background-color: rgb(255, 80, 0);
      }
    </style>
  </head>

  <body>
    <div class="container">
      <ul style="left: 0px">
        <li><img src="./img/1.jpg" alt="" /></li>
        <li><img src="./img/2.jpg" alt="" /></li>
        <li><img src="./img/3.jpg" alt="" /></li>
        <li><img src="./img/4.jpg" alt="" /></li>
        <li><img src="./img/5.jpg" alt="" /></li>
        <li><img src="./img/1.jpg" alt="" /></li>
      </ul>
      <a class="arrow arrow-left" href="javascript:;"> &lt; </a>
      <a class="arrow arrow-right" href="javascript:;"> &gt; </a>
      <div class="dots" id="dotWrap">
        <span class="current"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <script src="../animate.js"></script>
    <script>
      // 获取节点
      var container = document.getElementsByClassName('container')[0]
      var arrowLeft = document.getElementsByClassName('arrow-left')[0]
      var arrowRight = document.getElementsByClassName('arrow-right')[0]
      var spans = document.querySelectorAll('.dots span')
      var ul = document.querySelector('.container ul')
      var index = 0 // 默认下标为0，
      var timer // 保存定时器变量
      var isRunning = false // 假设轮播图动画不在运行中

      // 封装一个函数，设置小圆点的样式
      function setDotsStyle() {
        for (var i = 0; i < spans.length; i++) {
          spans[i].classList.remove('current')
        }

        if (index === 5) {
          index = 0
        }
        spans[index].classList.add('current')
      }

      container.onmouseover = function () {
        // 显示左右箭头
        arrowLeft.style.display = 'block'
        arrowRight.style.display = 'block'
        // 清除自动轮播
        clearInterval(timer)
      }
      container.onmouseout = function () {
        // 隐藏左右箭头
        arrowLeft.style.display = ''
        arrowRight.style.display = ''
        // 继续轮播
        auto()
      }

      // 给右箭头绑定单击事件
      arrowRight.onclick = function () {
        // 判断动画是否执行完毕
        if (isRunning) {
          // 直接退出
          console.log('正在取钱中,不要催')
          return
        }
        isRunning = true

        index++
        // 如果到了最后一直，则回到第一张
        if (index === 6) {
          index = 0
        }

        // ul.style.left = -index * 600 + 'px'
        animate(ul, { left: -index * 600 + 'px' }, 1000, function () {
          // 如果到了最后一张，则要调回到第一张
          if (index === 5) {
            console.log('index2')
            index = 0
            ul.style.left = -index * 600 + 'px'
          }
          setDotsStyle()
          // 要等动画完成后,则不在运行中
          isRunning = false
        })

        // 排他思想:先移除所有span类名current，在通过下标找到span添加类名curren
        // setDotsStyle()
      }

      // 给左箭头绑定单击事件
      arrowLeft.onclick = function () {
        // 判断动画是否在运行
        if (isRunning) {
          return
        }
        isRunning = true
        index--
        // 如果是第一张，则回到最后一张
        if (index === -1) {
          index = 5
          ul.style.left = -index * 600 + 'px'
          index--
        }

        animate(ul, { left: -index * 600 + 'px' }, 1000, function () {
          // 动画结束了，不在运行中
          isRunning = false
        })
        // 控制指示点高亮显示
        // 排他思想:先移除所有span类名current，在通过下标找到span添加类名curren
        setDotsStyle()
      }

      // 循环给指示点绑定单击事件
      for (var i = 0; i < spans.length; i++) {
        ;(function (i) {
          spans[i].onclick = function () {
            if (isRunning) {
              return
            }
            isRunning = true
            // 记录当前点击的下标
            index = i
            // ul.style.left = -index * 600 + 'px'
            animate(ul, { left: -index * 600 + 'px' }, 5000, function () {
              // 动画结束了
              isRunning = false
            })
            // 排他思想:先移除所有span类名current，在通过下标找到span添加类名curren
            setDotsStyle()
          }
        })(i)
      }

      function auto() {
        // 实现自动轮播，每隔2s
        timer = setInterval(function () {
          arrowRight.onclick()
        }, 2000)
      }

      auto()
    </script>
  </body>
</html>
